import React, { Component } from 'react'
import { Text, StyleSheet, View, StatusBar, Switch } from 'react-native'

export default class StatusbarDemo extends Component {
  constructor() {
    super()

    this.state = {
      hideStatusBar: false
    }
  }

  toggleStatusBar = () => {
    this.setState({
      hideStatusBar: !this.state.hideStatusBar
    })
  }

  render() {
    return (
      <View style={[styles.container]}>
        <StatusBar
          backgroundColor="blue" 
          animated={false} 
          hidden={this.state.hideStatusBar} 
        />
        <Text style={{fontSize: 40, marginVertical: 40}}>是否隐藏状态条</Text>

        {/*  开关是典型的受控组件 */}
        <Switch
          trackColor={{ false: "#999", true: "#666" }}
          thumbColor={this.state.hideStatusBar ? "red" : "white"}
          ios_backgroundColor="#3e3e3e"
          value={this.state.hideStatusBar}
          onValueChange={() => this.toggleStatusBar()}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent:'center',
    alignItems:'center', 
  }
})
